<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
    <meta charset="UTF-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>预览海报</title>
    <!--必要样式-->
    <link rel="stylesheet" type="text/css" href="__HCSS__component.css"/>
    <!--[if IE]>
    <!--<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>-->
    <![endif]-->

</head>
<div class="top">
    <a href=""> < </a><span>制作"电信光网宽带代言"海报</span>
</div>
<div class="kePublic">
    <div class="overlay-inner">
        <img id="preview" class="resize-image" src="__UPS__{$data['cover']}" alt="电信光网宽带" style="width: 100%">
    </div>
    <form id="form1" method="post" action="{:U('Index/savePreviewImg')}">
        <input type="hidden" value="{$data['id']}" name="id"/>
        <input id="coverdata" type="hidden" name="w_cover"/>

        <input name="cover"  type="hidden" value="{$data['cover']}">
        <input name="w" id="w" type="hidden">
        <input name="h" id="h" type="hidden">
        <input name="x" id="x" type="hidden">
        <input name="y" id="y" type="hidden">
        <input name="scale" id="scale" type="hidden">
        <input name="angle" id="angle" type="hidden">

    <div class="component">
        <div class="overlay"></div>
        <!--<button class="btn-crop js-crop">生成海报</button>-->
        <input type="submit"  class="btn-crop js-crop" value="生成海报">
    </div>
    </form>

    <div class="content_dis">
        <img src="__HIMG__dis_II.jpg" alt=""/>
    </div>
</div>

<!--<div class="mKeBanner">-->
    <!--<script src='__HJS__ad_js.php?aid=22' language='javascript'></script>-->
    <!--<script type="text/javascript">-->
        <!--var sogou_ad_id=569564;-->
        <!--var sogou_ad_height=90;-->
        <!--var sogou_ad_width=728;-->
    <!--</script>-->
    <!--<script type="text/javascript" src="__HJS__c.js"></script>-->
<!--</div>-->

<script type="text/javascript" src="__HJS__jquery-2.1.1.min.js"></script>
<!--<script type="text/javascript" src="__HJS__component.js"></script>-->

<script type="text/javascript" src="__HJS__hammer.min.js"></script>
<!--<script type="text/javascript" src="http://hammerjs.github.io/dist/hammer.min.js"></script>-->
<script>

    //获取裁容器宽高
    var overlayW = $(".overlay-inner").width();
    var overlayH = $(".overlay-inner").height();

    $("#w").val(overlayW);
    $("#h").val(overlayH);

    var reqAnimationFrame = (function () {
        return window[Hammer.prefixed(window, 'requestAnimationFrame')] || function (callback) {
                    window.setTimeout(callback, 1000 / 60);
                };
    })();

    var log = document.querySelector("#log");
    var el = document.querySelector("#preview");

//    var START_X = Math.round((window.innerWidth - el.offsetWidth) / 2);
//    var START_Y = Math.round((window.innerHeight - el.offsetHeight) / 2);
    var width = $("#preview").width();
    var height = $("#preview").height();
//    var START_X = -(width-overlayW)/2;
//    var START_Y = -(height-overlayH)/2;
    var START_X = 0;
    var START_Y = 0;
    var ticking = false;
    var transform;   //图像效果
    var timer;
    var initAngle = 0;  //旋转角度
    var initScale = 1;  //放大倍数

    var mc = new Hammer.Manager(el);   //用管理器  可以同时触发旋转 拖拽  移动
    //var mc = new Hammer(el);	      //旋转和移动互斥
    /**
     ev.srcEvent.type  touchstart  touchend touchmove
     ev.deltaX  手势移动位移变量
     */
    mc.add(new Hammer.Pan({ threshold: 0, pointers: 0 }));
    mc.add(new Hammer.Rotate({ threshold: 0 })).recognizeWith(mc.get('pan'));
    mc.add(new Hammer.Pinch({ threshold: 0 })).recognizeWith([mc.get('pan'), mc.get('rotate')]);
    //结束时做一些处理
    mc.on("hammer.input", function(ev) {
        if(ev.isFinal) {
            console.log(START_X+"  "+transform.translate.x  +"   "+ev.deltaX);
            START_X = transform.translate.x ;
            START_Y = transform.translate.y ;

        }

    });
    mc.on("panstart panmove", onPan);        //拖动
    mc.on("rotatestart rotatemove rotateend", onRotate);  //旋转
//    mc.on("pinchstart pinchmove", onPinch);  //缩放
    /**
     第二次进入拖拽时  delta位移重置
     移动时 初始位置startxy不动。delta增加
     */
    function onPan(ev){
//        if(transform.translate.x>0||transform.translate.y>0){
//
//            return;
//        }

        if(!ev.isFinal) {
            el.className = '';
            console.log(START_X   +"  "+  START_Y +" |  "+ev.deltaX   +"  "+  ev.deltaY);
            transform.translate = {
                x: START_X + ev.deltaX,
                y: START_Y + ev.deltaY
            };
            requestElementUpdate();
        }
        //获取x和y的坐标
//        alert(transform.translate.x+' '+transform.translate.y);

        $("#x").val(-transform.translate.x);
        $("#y").val(-transform.translate.y);

//        alert(START_Y);
    }
    //缩放
    function onPinch(ev){
        if(ev.type == 'pinchstart') {
            initScale = transform.scale || 1;
        }
        el.className = '';
        transform.scale = initScale * ev.scale;
        requestElementUpdate();
        //缩放比例
//        alert(transform.scale);
        $("#scale").val(transform.scale);

    }

    //旋转相关
    var  preAngle =0 ;
    var  tempAngleFlag=0;
    var  deltaAngle = 0;
    var  startRotateAngle = 0;

    function onRotate(ev) {

        //点下第二个触控点时触发
        if(ev.type == 'rotatestart') {
            startRotateAngle =  ev.rotation ;
            tempAngleFlag = 0 ;
        }
        if(ev.type == 'rotatemove'){
            if(tempAngleFlag == 0){
                preAngle = startRotateAngle;
                tempAngleFlag ++;
            }else{
                deltaAngle = ev.rotation - preAngle;
                el.className = '';
                transform.rz = 1;  //非0  垂直xy轴
                transform.angle =initAngle + deltaAngle;
                requestElementUpdate();
            }
        }

        //旋转结束  记录当前图片角度
        if(ev.type =='rotateend'){
            initAngle = transform.angle;
        }

        //获取旋转角度
        $("#angle").val(transform.angle);
    }

    function updateElementTransform() {
        var value = [
            'translate3d(' + transform.translate.x + 'px, ' + transform.translate.y + 'px, 0)',
            'scale(' + transform.scale + ', ' + transform.scale + ')',
            'rotate3d('+ transform.rx +','+ transform.ry +','+ transform.rz +','+  transform.angle + 'deg)'
        ];

        value = value.join(" ");
        el.style.webkitTransform = value;  /*为Chrome/Safari*/
        el.style.mozTransform = value; /*为Firefox*/
        el.style.transform = value; /*IE Opera?*/
        ticking = false;
    }

    function requestElementUpdate() {
        if(!ticking) {
            reqAnimationFrame(updateElementTransform);
            ticking = true;
        }
    }

    function logEvent(str) {
        log.insertBefore(document.createTextNode(str +"\n"), log.firstChild);
    }

    /**
     初始化设置
     */
    function resetElement() {

        el.className = 'animate';
        transform = {
            translate: { x: START_X, y: START_Y },
            scale: 1,
            angle: 0,
            rx: 0,
            ry: 0,
            rz: 0
        };
        requestElementUpdate();
    }

    resetElement();

</script>

</body>
</html>